<template>
  <c-model v-model="show" title="赠送优惠券" width="454px" btn-position="center" @confirm="submit">
    <div class="give-model">
      <div class="confirm-give-header">
        <div class="title fz-16 bold">我要赠送好友</div>
        <div class="desc flex row-center mt-12">
          <div class="label mr-10">{{ typeOptions[type] }}</div>{{ title }}
        </div>
        <div class="box flex">
          <div class="user-name bold mr-12">{{memberName}}</div>
          <div class="member-number fz-13 gray">{{memberNumber}}</div>
        </div>
      </div>
    </div>
  </c-model>
</template>
<script>
export default {
  name: "giveSubmit",
  props: {
    value: {type: Boolean, default: true},
    type: {type: Number|String, default: 1}, // 0网费 1充值券 2饮品券 3权益卡 4餐食券 5上网券
    memberName: {type: String, default: ''}, // 会员名称
    memberNumber: {type: String, default: ''}, // 会员编号
    title: {type: String, default: ''}, // 标题
  },
  data() {
    return {
      typeOptions: {
        0: '网费',
        1: '充值券',
        2: '饮品券',
        3: '权益卡',
        4: '餐食券',
        5: '上网券',
        6: '包时卡',
      }
    }
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    submit() {
      this.$emit('submit')
    }
  },
  created() {
  },
  watch: {}
}
</script>

<style scoped lang="scss">
.give-model {
  &:after {
    content: "";
    position: absolute;
    top: 0;
    height: 240px;
    left: 0;
    background: url("~@/assets/images/wallet/give-mask.png") no-repeat center center / cover;
    width: 100%;
  }
  button {
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    border-radius: 11px;
  }
  .confirm-give-header {
    text-align: center;
    position: relative;
    z-index: 1;
    .desc {
      color: $-color-brown;
      font-weight: bold;
      font-size: 16px;
      .label {
        height: 23px;
        line-height: 23px;
        background: linear-gradient( 134deg, #FFE925 0%, #FFD800 100%);
        border-radius: 4px;
        padding: 0 7px;
        margin-right: 8px;
        font-size: 14px;
        font-weight: 400;
      }
    }
    .box {
      background: #FFFFFF;
      border-radius: 8px;
      border: 1px solid #F3D0A7;
      height: 48px;
      width: 100%;
      line-height: 48px;
      text-align: center;
      margin-top: 16px;
      padding: 0 17px;
      box-sizing: border-box;
      position: relative;
      z-index: 1;
    }
  }
}
</style>
